<template>
    <div>
        <div class="container-book" v-for="(item,index) of items" :key="index">
            <div class="book-nav">
                <p>{{item.title}}</p>
                <a href="">
                    查看更多
                    <span class="iconfont icon-iconfontjiantou5"></span>
                </a>
            </div>
            <div class="book-main" v-for="(content,index) of item.main" :key="index">
                <img :src="content.img_name" alt="">
                <div class="book-main-p-box">
                    <p>{{content.title_name}}</p>
                </div>
                <button>进入</button>
                <span>{{content.time}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            items:[
                {
                    title:"精选手册",
                    main : [
                        {
                            img_name : "/images/2.jpg",
                            title_name : "Java电子书",
                            time : "2020-06-13 16:32:33"
                        },
                        {
                            img_name : "/images/3.jpg",
                            title_name : "前端开发",
                            time : "2020-06-13 16:33:12"
                        }
                    ],
                },
                {
                    title:"精选博客",
                    main : [
                        {
                            img_name : "/images/4.jpg",
                            title_name : "学习编程的五大误区",
                            time : "2020-06-13 18:20:46"
                        },
                        {
                            img_name : "/images/5.jpg",
                            title_name : "项目开发中你是怎样使用Git的",
                            time : "2020-06-13 18:31:34"
                        },
                        {
                            img_name : "/images/6.jpg",
                            title_name : "方向错了努力只会离目标越来越远",
                            time : "2020-06-13 18:31:04"
                        },
                    ],
                },
                {
                    title:"精选视频",
                    main : [
                        {
                            img_name : "/images/7.jpg",
                            title_name : "JavaScript入门",
                            time : "2020-06-13 23:26:40"
                        },
                        {
                            img_name : "/images/1.jpg",
                            title_name : "网页重构",
                            time : "2020-06-13 00:04:46"
                        },
                        {
                            img_name : "/images/8.jpg",
                            title_name : "Vue基础教程",
                            time : "2020-06-13 00:13:22"
                        },
                    ]
                }
            ],
        }
    }
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .book-nav{
        width: 9.6rem;
        height: 1.1rem;
        margin: 0 auto;
        margin-top: 0.2rem;
    }
    .book-nav p{
        font-size: 0.44rem;
        float: left;
        line-height: 1.1rem;
    }
    .book-nav a{
        font-size: 0.35rem;
        float: right;
        line-height: 1.1rem;
        text-decoration: none;
        color: #c7c7c7;
    }
    .book-nav a span{
        font-size: 0.35rem;
    }
    .book-main{
        width: 9.6rem;
        height: 1.8rem;
        margin: 0 auto;
        margin-top: 0.5rem;
        /* background-color: #f00; */
        position: relative;
    }
    .book-main img{
        width: 2.8rem;
        height: 100%;
        float: left;
        border-radius: 0.2rem;
    }
    .book-main-p-box{
        width: 2.6rem;
        height: 1.06rem;
        float: left;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .book-main p{
        font-size: 0.4rem;
        line-height: 1.06rem;
        /* float: left; */
        padding-left: 0.4rem;
        /* margin-top: 0.3rem; */
    }
    .book-main span{
        font-size: 0.23rem;
        /* float: left; */
        /* margin-top: 1rem; */
        color: #c9c9c9;
        position: absolute;
        left: 3.25rem;
        top: 1.08rem;
    }
    .book-main button{
        width: 1.37rem;
        height: 0.54rem;
        margin-top: 0.3rem;
        border-radius: 0.2rem;
        background-color: #02cbff;
        border: none;
        font-size: 0.23rem;
        color: #fff;
        float: right;
    }
</style>